<template>
  <div id="statistics" >
    <el-row>
      <el-date-picker
        type="date"
        placeholder="选择日期"
        v-model="date"
        size='mini'
      ></el-date-picker>
      <el-button @click="search" size="mini">查询</el-button>
    </el-row>
    <el-row>
      <el-col :span="15">
        <div class="main" id="main"></div>
      </el-col>
      <el-col :span="9">
        <div class="main" id="departPie"></div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24">
        <div class="main" id="departLine"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDepartmentRatio, getDepartmentNumVary } from "@/network/index.js";
export default {
  name: "Statistics",
  components: {},
  data() {
    return {
      departChart: Object,
      departChartSeries: [],
      departPie: Object,
      departData: [],
      date: "",
    };
  },
  departList: [
    "网安学院",
    "教育学院",
    "机械学院",
    "电智学院",
    "文传学院",
    "计科学院",
    "网络空间安全学院",
  ],
  methods: {
    open(message, type) {
      this.$message({
        message,
        type,
      });
    },
    search() {
      if (this.date == "" || this.date == null)
        this.open("请先选择日期", "warning");
      else {
        let time = new Date(this.date).format("yyyy-MM-dd");
        this.getDepartment(time);
      }
    },
    getDepartment(date) {
      let token = this.$store.getters.getToken;
      getDepartmentRatio(token, date)
        .then((res) => {
          if (res.data.code >= 200 && res.data.code < 300) {
            let resData = res.data.data;
            //处理数据，数据赋值到表中
            // 绘制图表
            this.departData = res.data.data;
            this.departChartSeries = [];
            [...resData].forEach((element) => {
              this.departChartSeries.push(element.ratio);
            });
          } else throw new Error(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //绘制指定日期学院打卡率
    drawDepartment() {
      // 基于准备好的dom，初始化echarts实例
      this.departChart.clear();
      this.departChart.setOption({
        title: {
          text: new Date(this.date).format("yyyy-MM-dd") + "各学院打卡率",
        },
        tooltip: {},
        xAxis: {
          data: this.$options.departList,
          axisLabel: {
            interval: 0,
          },
        },
        yAxis: {},
        series: [
          {
            color: ["#c23531"],
            emphasis: {
              itemStyle: {
                // 高亮时点的颜色。
                color: "#7289ab",
              },
            },
            name: "打卡率",
            type: "bar",
            data: this.departChartSeries,
          },
        ],
      });
    },
    drawDepartPie() {
      let showData = [];
      this.$options.departList.forEach((element, index) => {
        let temp = { value: this.departData[index].clockNum, name: element };
        showData.push(temp);
      }),
        this.departPie.clear();
      this.departPie.setOption({
        title: {
          text: new Date(this.date).format("yyyy-MM-dd") + "各学院打卡人数",
        },
        tooltip: {},
        series: [
          {
            labelLine: {
              normal: {
                show: true,
              },
            },
            emphasis: {
              itemStyle: {
                // 高亮时点的颜色。
                color: "#7289ab",
              },
            },
            name: "打卡人数",
            type: "pie",
            radius: "55%",
            roseType: "angle",
            data: showData,
          },
        ],
      });
    },
    drawLine() {
      let token = this.$store.getters.getToken;
      getDepartmentNumVary(token)
        .then((res) => {
          if (res.data.code >= 200 && res.data.code < 300) {
            this.drawChartLine(res.data.data);
          } else throw new Error(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawChartLine(data) {
      console.log(data);
      let x = []; //x轴数据
      let y1 = [];  //体温数据
      let y2 = [];  //高危地区数据
      data.forEach(item => {
        x.push(item.clockInDate);
        y1.push(item.exceptionNum);
        y2.push(item.riskNum);
      })
      let departLine = this.$root.echarts.init(
        document.getElementById("departLine")
      );
      departLine.setOption({
        // 标题
        title: {
          text: "最近14天体温超过37.3和去过高危地区人数变化折线图", // 标题名称
        },
        // x轴
        xAxis: {
          data: x, // x轴坐标名称
          axisLabel: {
            interval: 0,
          },
        },
        // y轴
        yAxis: {},
        // 提示框，鼠标悬浮交互时的信息提示
        tooltip: {
          show: true, // 是否显示
          trigger: "axis", // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
        },
        legend: {
          data: ["体温超过37.3", "去过高危地区"],
        },
        // 指定图标的类型
        series: [
          // 第一条折线图
          {
            name: "体温超过37.3", // 系列名称
            type: "line", // 类型：线
            data: y1, // 数据
            markPoint: {
              // 标注图形数据
              data: [
                {
                  type: "max", // 类型
                  symbol: "pin", // 标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星
                  name: "最大值",
                },
                {
                  type: "min", // 类型
                  symbol: "pin",
                  name: "最小值",
                },
              ],
              // 特殊标注文字
              label: {
                normal: {
                  show: true,
                  //position: 'top', // 文字位置
                  // 显示的文字
                  formatter: "{b}：{c}",
                },
              },
              // 触发操作
              tooltip: {
                show: true, // 是否显示
                formatter: "{b}：{c}", // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
                trigger: "item", // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
              },
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值",
                  itemStyle: {
                    normal: {
                      color: "orange",
                    },
                  },
                },
              ],
            },
            // 折线图圆点
            label: {
              normal: {
                show: true,
                //position: 'bottom', // 文字位置
                // 显示的文字
                formatter: "{c}",
                textStyle: {
                  color: "#000", // 文字颜色
                },
              },
            },
          },
          // 第二条折线图
          {
            name: "去过高危地区", // 系列名称
            type: "line", // 类型：线
            data: y2, // 数据
            markPoint: {
              // 标注图形数据
              data: [
                {
                  type: "max", // 类型
                  symbol: "pin", // 标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星
                  name: "最大值",
                },
                {
                  type: "min", // 类型
                  symbol: "pin",
                  name: "最小值",
                },
              ],
              // 特殊标注文字
              label: {
                normal: {
                  show: true,
                  //position: 'top', // 文字位置
                  // 显示的文字
                  formatter: "{b}：{c}",
                },
              },
              // 触发操作
              tooltip: {
                show: true, // 是否显示
                formatter: "{b}：{c}", // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
                trigger: "item", // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
              },
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值",
                  itemStyle: {
                    normal: {
                      color: "green",
                    },
                  },
                },
              ],
            },
            // 折线图圆点
            label: {
              normal: {
                show: true,
                //position: 'bottom', // 文字位置
                // 显示的文字
                formatter: "{c}",
                textStyle: {
                  color: "#000", // 文字颜色
                },
              },
            },
          },
        ],
      });
    },
  },
  //监视数据变化
  watch: {
    departChartSeries: function() {
      this.drawDepartment();
      this.drawDepartPie();
    },
  },
  mounted() {
    this.date = new Date().format("yyyy-MM-dd");
    //1、指定日期各学院的打卡率 柱状图
    {
      this.departChart = this.$root.echarts.init(
        document.getElementById("main")
      );
    }
    //2、指定日期各学院的打卡人数 饼图
    {
      this.departPie = this.$root.echarts.init(
        document.getElementById("departPie")
      );
    }
    //获取数据
    this.getDepartment(this.date);

    //3、画折线图
    this.drawLine();
  },
};
</script>

<style scoped>
.main {
  height: 330px;
  width: 100%;
  padding-top: 4px;
  /* border: 1px solid blueviolet; */
}
</style>
